<template>
  <div style="height: 600px">
    <div class="flex-row-start-start">
      <div style="width: 90%" class="flex-row-start-center">
        <!-- <Select
          v-model="jcEventId"
          style="width: calc(12.346% - 10px); margin-right: 10px"
          placeholder="编号"
          size="large"
          clearable
        >
          <Option v-for="item in jcEventIdList" :key="item" :value="item">{{
            item
          }}</Option>
        </Select> -->
        <!-- <Select
          v-model="kqName"
          style="width: calc(12.346% - 10px); margin-right: 10px"
          placeholder="库区名称"
          size="large"
          clearable
        >
          <Option v-for="item in kqNameList" :key="item" :value="item">{{
            item
          }}</Option>
        </Select> -->
        <!-- <Select
          v-model="jzId"
          style="width: calc(12.346% - 10px); margin-right: 10px"
          placeholder="井组编号"
          size="large"
          clearable
        >
          <Option v-for="item in jzIdList" :key="item" :value="item">{{
            item
          }}</Option>
        </Select> -->
        <!-- <Select
          v-model="jzName"
          style="width: calc(12.346% - 10px); margin-right: 10px"
          placeholder="井组名称"
          size="large"
          clearable
        >
          <Option v-for="item in jzNameList" :key="item" :value="item">{{
            item
          }}</Option>
        </Select> -->
        <!-- <Select
          v-model="jcdId"
          style="width: calc(12.346% - 10px); margin-right: 10px"
          placeholder="检测点编号"
          size="large"
          clearable
        >
          <Option v-for="item in jcdIdList" :key="item" :value="item">{{
            item
          }}</Option>
        </Select> -->
        <Select
          v-model="jcdName"
          style="width: calc(12.346% - 10px); margin-right: 10px"
          placeholder="检测点名称"
          size="large"
          clearable
        >
          <Option v-for="item in jcdNameList" :key="item" :value="item">{{
            item
          }}</Option>
        </Select>
        <!-- <Select
          v-model="runState"
          style="width: calc(12.346% - 10px); margin-right: 10px"
          placeholder="运行状态"
          size="large"
          clearable
        >
          <Option v-for="item in runStateList" :key="item" :value="item">{{
            item
          }}</Option>
        </Select> -->
      </div>
      <div style="width: 10%" class="flex-row-end-center">
        <Button
          type="error"
          style="width: 60px; text-align: center"
          @click="onQuery"
          >查询</Button
        >
      </div>
    </div>
    <div style="margin-top: 20px">
      <Table :columns="columns" :data="tableData"></Table>
      <div
        class="flex-row-end-center"
        style="margin-top: 10px"
        v-if="totalLen > 10"
      >
        <Page
          
          :total="totalLen"
          :page-size="pageSize"
          show-total
          @on-change="changepage"
        />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      jcEventId: "",
      jcEventIdList: [],
      pageSize: 10,
      eventTypeList: ["泄漏", "连通性", "环库泄漏"],
      eventType: "",
      kqName: "",
      kqNameList: [],
      jzId: "",
      jzIdList: [],
      jzName: "",
      jzNameList: [],
      jcdName: "",
      jcdNameList: [],
      jcdId: "",
      jcdIdList: [],
      runState: "",
      runStateList: ["未处理", "已处理", "正在处理"],
      columns: [
        // { title: "采样检测事件编号", key: "jcEventId" },
        { title: "库区名称", key: "kqName" },
        // { title: "井组编号", key: "jzId" },
        { title: "井组名称", key: "jzName" },
        // { title: "检测点编号", key: "jcdId" },
        { title: "检测点名称", key: "jcdName" },
        { title: "数值状态", key: "jcState" },
        { title: "检测点坐标", key: "jcPoint" },
        { title: "数据最后更新时间", key: "updateTime" },
      ],
      tableData: [],
      jcdList: [],
      curPage: 0,
    };
  },
  props: {
    jcdInfoList: Array,
    curJz: String,
    totalLen: Number,
  },
  watch: {
    jcdInfoList(val) {
      let it = this;
      this.jcdList = val;
      this.tableData = this.jcdList.slice(0, this.pageSize);
      val.forEach((item) => {
        if (it.jzIdList.indexOf(item.jzId) < 0) {
          it.jzIdList.push(item.jzId);
        }
        if (it.jzNameList.indexOf(item.jzName) < 0) {
          it.jzNameList.push(item.jzName);
        }
        if (it.jcdIdList.indexOf(item.jcdId) < 0) {
          it.jcdIdList.push(item.jcdId);
        }
        if (it.jcdNameList.indexOf(item.jcdName) < 0) {
          it.jcdNameList.push(item.jcdName);
        }
        if (it.jcEventIdList.indexOf(item.jcEventId) < 0) {
          it.jcEventIdList.push(item.jcEventId);
        }
        if (it.kqNameList.indexOf(item.kqName) < 0) {
          it.kqNameList.push(item.kqName);
        }
      });
      it.jzIdList.forEach((item, index) => {
        if (item.indexOf(it.curJz) > -1) {
          it.jzId = item;
          it.jzName = it.jzNameList[index];
          // it.kqName = it.kqNameList[index]
        }
      });
    },
  },
  methods: {
    changepage(index) {
      let it = this;
      this.curPage = 0;
      let o = {};
      if (it.jcEventId == "" || it.jcEventId == undefined) {
        it.jcEventId = "";
      }
      if (it.jcdId == "" || it.jcdId == undefined) {
        it.jcdId = "";
      }
      if (it.jcdName == "" || it.jcdName == undefined) {
        it.jcdName = "";
      }
      if (it.jzId == "" || it.jzId == undefined) {
        it.jzId = "";
      }
      if (it.jzName == "" || it.jzName == undefined) {
        it.jzName = "";
      }
      if (it.runState == "" || it.runState == undefined) {
        it.runState = "";
      }
      if (it.kqName == "" || it.kqName == undefined) {
        it.kqName = "";
      }
      o.jcEventId = it.jcEventId;
      o.jcdId = it.jcdId;
      o.jcdName = it.jcdName;
      o.jzId = it.jzId;
      o.jzName = it.jzName;
      o.runState = it.runState;
      o.kqName = it.kqName;
      o.page = index - 1;

      this.curPage = index;
      this.$emit("change-to-page", o);
    },
    onQuery() {
      let it = this;
      let o = {};
      if (it.jcEventId == "" || it.jcEventId == undefined) {
        it.jcEventId = "";
      }
      if (it.jcdId == "" || it.jcdId == undefined) {
        it.jcdId = "";
      }
      if (it.jcdName == "" || it.jcdName == undefined) {
        it.jcdName = "";
      }
      if (it.jzId == "" || it.jzId == undefined) {
        it.jzId = "";
      }
      if (it.jzName == "" || it.jzName == undefined) {
        it.jzName = "";
      }
      if (it.runState == "" || it.runState == undefined) {
        it.runState = "";
      }
      if (it.kqName == "" || it.kqName == undefined) {
        it.kqName = "";
      }
      o.jcEventId = it.jcEventId;
      o.jcdId = it.jcdId;
      o.jcdName = it.jcdName;
      o.jzId = it.jzId;
      o.jzName = it.jzName;
      o.runState = it.runState;
      o.kqName = it.kqName;
      o.page = 0;

      this.$emit("change-to-page", o);
    },
    query() {
      let data = [];
      let it = this;
      if (
        !(
          (it.jcEventId == "" || it.jcEventId == undefined) &&
          (it.jcdId == "" || it.jcdId == undefined) &&
          (it.jcdName == "" || it.jcdName == undefined) &&
          (it.jzId == "" || it.jzId == undefined) &&
          (it.jzName == "" || it.jzName == undefined) &&
          (it.runState == "" || it.runState == undefined) &&
          (it.kqName == "" || it.kqName == undefined)
        )
      ) {
        data = this.jcdList.filter(function (item) {
          return (
            (it.kqName != "" ? item.kqName == it.kqName : true) &&
            (it.jcEventId != "" ? item.jcEventId == it.jcEventId : true) &&
            (it.jcdId != "" ? item.jcdId == it.jcdId : true) &&
            (it.jzId != "" ? item.jzId == it.jzId : true) &&
            (it.runState != "" ? item.runState == it.runState : true)
          );
        });
        this.tableData = data.slice(0, this.pageSize);
      } else {
        this.tableData = this.jcdList.slice(0, this.pageSize);
      }
    },
  },
};
</script>
<style scoped>
</style>